<template>
  <div class="main">
    <el-row :gutter="20" justify="center" type="flex">
        <el-col :span="18">
            <el-form ref="newsForm" :model="news"
                :rules="rules"  label-width="80px"
                :inline="false" size="mini" status-icon>
                <el-form-item label="主题" prop="ntid">
                    <el-select placeholder="请选择" v-model="news.ntid" clearable filterable style="width:200px">
                        <el-option v-for="topic in topicList"
                            :key="topic.tid"
                            :label="topic.tname"
                            :value="topic.tid">
                        </el-option>
                    </el-select>                   
                </el-form-item>
                
                <el-form-item label="标题" prop="ntitle">
                    <el-input style="width:200px" v-model="news.ntitle"></el-input>
                </el-form-item>

                <el-form-item label="作者" prop="nauthor">
                    <el-input style="width:200px" v-model="news.nauthor"></el-input>
                </el-form-item>

                <el-form-item label="摘要" prop="nsummary">
                    <el-input v-model="news.nsummary"></el-input>
                </el-form-item>

                <!-- <el-form-item label="内容" prop="ncontent">
                    <el-input type="textarea" v-model="news.ncontent" :rows="5"  placeholder="" 
                    :maxlength="-1" :show-word-limit="false" >
                    </el-input>
                </el-form-item> -->
                <el-form-item label="内容" prop="ncontent">
                    <div ref="ncontent" style="border: 1px solid #ccc; z-index:100;">
                        <Toolbar
                            style="border-bottom: 1px solid #ccc"
                            :editor="editor"
                            :defaultConfig="toolbarConfig"
                            :mode="mode"
                        />
                        <Editor
                            style="height: 300px; overflow-y: hidden;"
                            v-model="news.ncontent"
                            :defaultConfig="editorConfig"
                            :mode="mode"
                            @onCreated="onCreated"
                        />
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
            
        </el-col>
    </el-row>
    
  </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
    name:'NewsAdd',
    components:{Editor,Toolbar},
    data(){
        return {
            topicList:[],
            news:{
                ntid:'',
                ntitle:'',
                nauthor:'',
                nsummary:'',
                ncontent:'',
                npicpath:''
            },
            rules:{
                ntid:[
                    {
                        type: "number",
                        required: true,
                        trigger: "change",
                        message: "请选择新闻类别",
                    }
                ],
                ntitle:[
                    {
                        type:'string',
                        required:true,
                        trigger:'blur',
                        message:'请输入标题'
                    }
                ],
                nauthor:[
                    {
                        type:'string',
                        required:true,
                        trigger:'blur',
                        message:'请输入作者'
                    }
                ],
                nsummary:[
                    {
                        type:'string',
                        required:true,
                        trigger:'blur',
                        message:'请输入摘要'
                    }
                ],
                ncontent:[
                    {
                        type:'string',
                        required:true,
                        trigger:'blur',
                        message:'请输入内容'
                    }
                ]
            },

            editor: null,
            html: '<p>hello</p>',
            toolbarConfig: { },
            editorConfig: { 
                placeholder: '请输入内容...',
                MENU_CONF:{
                    uploadImage:{
                        fieldName:'uploadFile', //上传到服务器参数名称
                        server:'/api/upload',
                        maxFileSize: 2 * 1024 * 1024,
                        // onBeforeUpload:(file)=>{
                        //     console.log('onBeforUpload',file)
                        //     const size = file[Object.keys(file)].size
                        //     console.log('=====',size)
                        //     if(size>2 * 1024 * 1024){
                        //         this.$message.error('文件不能超过2MB')
                        //         return false
                        //     }
                        //     return file
                        // },
                        onFailed(){
                            console.log('failed')
                        },
                        onError:(file,error)=>{
                            console.log(file.name)
                            console.log(error.name)
                            console.log(error.message)
                            if(error.message.indexOf('exceeds maximum allowed')>-1){
                                this.$message.error(file.name+' 图片不能超过2MB')
                            }
                        }
                    },
                    insertImage:{
                        onInsertedImage(){
                            console.log('inseted')
                        }
                    }
                }
            },
            mode: 'default', //'default' or 'simple'
        } 
    },
    created(){
        this.allTopic()
    },
    methods:{
        allTopic(){
            this.$axios({
                url:'/api/allTopic'
            }).then(rs=>{
                this.topicList=rs.data.data
            })
        },
        submitForm(){
            this.$refs.newsForm.validate(flag=>{
                if(flag){
                    if(this.editor.isEmpty()){
                        this.$message.error('内容不能为空')
                        this.$refs.ncontent.style='border: 1px solid red; z-index:100;'
                        return
                    }

                    let imageList = this.editor.getElemsByType('image')
                    this.news.npicpath=''
                    if(imageList.length>0){
                        imageList.forEach(img=>{
                            this.news.npicpath=this.news.npicpath+img.alt+','
                        })
                    }

                    this.$axios({
                        url:'/api/addNews',
                        method:'post',
                        data:{
                            ...this.news
                        }
                    }).then(rs=>{
                        if(rs.data.data){
                            this.$router.replace({name:'NewsManager'},()=>{})
                            this.$message.success('添加成功')
                        }else{
                            this.$message.error('添加错误')
                        }
                    })
                }
            })
        },

        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
    },
    beforeDestroy(){
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
